<template>
    <div class="" style="width:22vw;height:100vh;color:white;background-color:rgba(3,3,3,0.5);">
        <div style="padding-top:10vh;">
            <div style="margin-left:10px;"><i class="el-icon-s-shop" style="color:#409EFF;"></i><span style="margin-left:5px;font-size:14px;">环境监测数据</span></div>

            <div style="display:flex;flex-wrap:wrap;justify-content: space-between;">
                <!--<div v-for="(item,index) in weatherData" :key="index" style="width:40%;border:1px solid red;">
                    <div>{{item.name}}</div>
                    <div>{{item.number}}</div>-->
                <!--   地块设备列表   -->
                <div style="display:flex;width:22vw;flex-wrap:wrap;">
                    <div v-for="(item,index) in equipmentData" :key="index" style="margin:10px;">
                        <el-button type="primary" @click="equipmentButton(item)">{{item.equipmentName}}</el-button>
                    </div>
                </div>
                <!--  设备气象数据  -->
                <div class="box" v-if="qixiangData.atmosphericTemperature">
                    <div>
                        <div>温度监测</div>
                        <div class="fontsize">{{qixiangData.atmosphericTemperature}}</div>
                    </div>
                    <div><i class="iconfont iconwendu " style="font-size:20px;color:white;"></i></div>
                </div>
                <div class="box" v-if="qixiangData.atmosphericHumidity">
                    <div>
                        <div>湿度监测</div>
                        <div class="fontsize">{{qixiangData.atmosphericHumidity}}</div>
                    </div>
                    <div><i class="iconfont iconiconset0457 " style="font-size:20px;color:white;"></i></div>
                </div>
                <div class="box" v-if="qixiangData.windspeed">
                    <div>
                        <div>风速监测</div>
                        <div class="fontsize">{{qixiangData.windspeed}}</div>
                    </div>
                    <div><i class="iconfont iconfeng " style="font-size:20px;color:white;"></i></div>
                </div>
                <div class="box" v-if="qixiangData.windDirection">
                    <div>
                        <div>风向监测</div>
                        <div class="fontsize">{{qixiangData.windDirection}}</div>
                    </div>
                    <div><i class="iconfont iconfengxiang " style="font-size:20px;color:white;"></i></div>
                </div>
                <div class="box" v-if="qixiangData.Co2">
                    <div>
                        <div>二氧化碳</div>
                        <div  class="fontsize">{{qixiangData.Co2}}</div>
                    </div>
                    <div><i class="iconfont iconeryanghuatan " style="font-size:20px;color:white;"></i></div>
                </div>
<!--                 <div>-->
<!--                    <div class="box" v-if="qixiangData.digitalAirPressure">-->
<!--                       <div>数字气压</div>-->
<!--                        <div class="fontsize">{{qixiangData.windspeed}}</div>-->
<!--                    </div>-->
<!--                    <div><i class="iconfont iconguangzhao " style="font-size:20px;color:white;"></i></div>-->
<!--                </div>-->
                <div class="box" v-if="qixiangData.rainfall">
                    <div>
                        <div>降雨量</div>
                        <div class="fontsize">{{qixiangData.rainfall}}</div>
                    </div>
                    <div><i class="iconfont iconjiangyuliang" style="color:#FC8D05;font-size:20px;"></i></div>
                </div>

                <div class="box" v-if="qixiangData.rainfall1">
                    <div>
                        <div>降雨量</div>
                        <div class="fontsize">{{qixiangData.rainfall1}}</div>
                    </div>
                    <div><i class="iconfont iconjiangyuliang" style="color:#FC8D05;font-size:20px;"></i></div>
                </div>
                <div class="box" v-if="qixiangData.digitalAirPressure">
                    <div>
                        <div>数字气压</div>
                        <div class="fontsize">{{qixiangData.digitalAirPressure}}</div>
                    </div>
                    <div><i class="iconfont iconqiya" style="color:#FC8D05;font-size:20px;"></i></div>
                </div>
                <div class="box" v-if="qixiangData.soil">
                    <div>
                        <div>土壤温度</div>
                        <div class="fontsize">{{qixiangData.soil}}</div>
                    </div>
                    <div><i class="iconfont iconturangwendu" style="color:#FC8D05;font-size:20px;"></i></div>
                </div>
                <div class="box" v-if="qixiangData.humidity">
                    <div>
                        <div>土壤湿度</div>
                        <div class="fontsize">{{qixiangData.humidity}}</div>
                    </div>
                    <div><i class="iconfont iconturangshidu" style="color:#FC8D05;font-size:20px;"></i></div>
                </div>


                <div class="box" v-if="qixiangData.PHvalue">
                    <div>
                        <div>土壤PH值</div>
                        <div  class="fontsize">{{qixiangData.PHvalue}}</div>
                    </div>
                    <div><i class="iconfont iconpHzhi " style="font-size:20px;color:white;"></i></div>
                </div>
                <div class="box" v-if="qixiangData.totalSolarRadiation">
                    <div>
                        <div>照度监测</div>
                        <div class="fontsize">{{qixiangData.totalSolarRadiation}}</div>
                    </div>
                    <div><i class="iconfont iconpHzhi" style="color:#71C80D;font-size:20px;"></i></div>
                </div>
                <div class="box" v-if="qixiangData.conductivity">
                    <div>
                        <div>电导率</div>
                        <div  class="fontsize">{{qixiangData.conductivity}}</div>
                    </div>
                    <div style="margin-left:35px;"><i class="iconfont icondianchi " style="font-size:20px;color:white;"></i></div>
                </div>
              <div class="box" v-if="qixiangData.conductivity">
                <div>
                  <div>电导率</div>
                  <div  class="fontsize">{{qixiangData.conductivity}}</div>
                </div>
                <div style="margin-left:35px;"><i class="iconfont icondianchi " style="font-size:20px;color:white;"></i></div>
              </div>
              <div class="box" v-if="qixiangData.Luxvalue">
                <div>
                  <div>光照强度</div>
                  <div  class="fontsize">{{qixiangData.Luxvalue}}</div>
                </div>
                <div style="margin-left:35px;"><i class="iconfont icontaiyang" style="font-size:20px;color:white;"></i></div>
              </div>
                <!--<div class="box">
                    <div>
                        <div>电导率</div>
                        <div  class="fontsize">{{equipmentData[0].name}}</div>
                    </div>
                    <div style="margin-left:35px;"><i class="iconfont icondianchi " style="font-size:20px;color:white;"></i></div>
                </div>-->
            </div>
        </div>
    </div>
</template>
<script>
import axios from 'axios'
export default {
    data() {
        return {
            qixiangDataid: {}
        };
    },
    // props: ['qixiangData']
    props: {
        dataList: Array,
        qixiangData: {
            type: Object
        },
        equipmentData: {
            type: Array
        }
    },
    computed: {

    },
    mounted() {

    },
    methods: {
        equipmentButton(e){
            this.$emit("equipmentButtons",e)
            // console.log(e)
        }
    },
	created(){
        console.log(this.qixiangData)
	}
};
</script>
<style scoped>
	.box{
        width: 35%;
        background-color:rgba(3,3,3,0.5);
        font-size: 12px;
        margin: 10px;
        padding: 8px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .fontsize{
        color:chartreuse;
        margin-left: 5px;
        margin-top: 5px;
    }
</style>
